<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />

    <el-card shadow="never" :body-style="{ padding: '15px 20px 15px' }" class="mt15">
      <div slot="header" class="f16">
        <span style="font-weight: 600">指令明细</span>
      </div>
      <div class="mt15 flex">
        <Find :OriginalFilter="{ static: true }" :formList="formList2" :searchImg="false" />
        <div style="width: 79rem">
          <Table :tableHeader="tableHeader" :tableData="tableData" class="ml15" />
        </div>
      </div>
      <div class="flex mt15">
        <div style="width: 635rem" class="mr10">
          <Table :tableHeader="tableHeader2" :tableData="tableData2" selection />
        </div>
        <div style="width: 75rem">
          <Table :tableHeader="tableHeader3" :tableData="tableData3" />
        </div>
      </div>

      <div class="flex mt15">
        <el-select v-model="value" filterable placeholder="PO号码明细">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="ml20" v-if="value === 0">
          <span class="f14 mr10">码制</span>
          <el-select v-model="value2" filterable placeholder="欧码" style="width: 120px">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="ml20" v-if="value === 5">
          <span class="f14 mr10">PS:处理因配码变更，面仓、底、成品仓按新配码数入库，同步更新库存状态</span>
        </div>
      </div>

      <div class="mt15" v-if="value === 0">
        <Table :tableHeader="tableHeader4" :tableData="tableData4" />
      </div>
      <div class="mt15" v-if="value === 1">
        <Table :tableHeader="tableHeader5" :tableData="tableData5" />
      </div>
      <!-- 配色注意事项 -->
      <div class="mt15" v-if="value === 2">
        <Table :tableHeader="tableHeader6" :tableData="tableData6" />
      </div>
      <!-- 型体配宣明细 -->
      <div class="mt15" v-if="value === 3">
        <Table :tableHeader="tableHeader7" :tableData="tableData7" />
      </div>
      <!-- 配色BOM资料 -->
      <div class="mt15" v-if="value === 4">
        <Table :tableHeader="tableHeader8" :tableData="tableData8" />
      </div>
      <!-- 各节点生产明细 -->
      <div class="mt15 flex" v-if="value === 5">
        <Table :tableHeader="tableHeader9" :tableData="tableData9" class="mr55" />
        <Table :tableHeader="tableHeader9" :tableData="tableData9" class="mr55" />
        <Table :tableHeader="tableHeader9" :tableData="tableData9" />
      </div>

      <div class="btns">
        <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
        <el-button type="primary" size="default" @click="">打印</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'InstructionDataL'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂型体',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂型体',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '新旧型体',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '颜色代码',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '颜色名称',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '品牌',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '下单日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '客人交期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入合同号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入客人货号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '冲刀',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '楦头',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '底模',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '大底厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '季度',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '新增指令'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '指令复制'
  },
  {
    type: 'button',
    checkboxLabel: '整单删除'
  },
  {
    type: 'button',
    checkboxLabel: '计算预补量'
  },
  {
    type: 'button',
    checkboxLabel: '计算中间码'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  },
  {
    type: 'button',
    checkboxLabel: '生产指令单'
  },
  {
    type: 'button',
    checkboxLabel: '导出指令单'
  },
  {
    type: 'button',
    checkboxLabel: '转配色BOM'
  },
  {
    type: 'button',
    checkboxLabel: '转型体资料'
  },
  {
    type: 'button',
    checkboxLabel: '取大底入货号码明细',
    disabled: true
  },
  {
    type: 'button',
    checkboxLabel: '取鞋面生产号码明细',
    disabled: true
  },
  {
    type: 'button',
    checkboxLabel: '取成型生产号码明细',
    disabled: true
  },
  {
    type: 'button',
    checkboxLabel: '指令更新',
    disabled: true
  }
])

const formList2 = ref([
  {
    type: 'checkbox',
    checkboxLabel: '全套',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '主面料',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '冲裁',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '工艺',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '配套',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '针车',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '大底',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '成型',
    checkboxValue: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '外发',
    checkboxValue: false
  },
  {
    type: 'input',
    inputLabel: '制单人',
    inputValue: '',
    inputDisabled: true
  },
  {
    type: 'input',
    inputLabel: '制单日期',
    inputValue: '',
    inputDisabled: true
  },
  {
    type: 'input',
    inputLabel: '检核日期',
    inputValue: '',
    inputDisabled: true
  },
  {
    type: 'input',
    inputLabel: '指令生成日期',
    inputValue: '',
    inputDisabled: true
  },
  {
    type: 'input',
    inputLabel: '备注',
    inputValue: '',
    inputDisabled: true
  }
])

const tableHeader = ref([
  {
    label: '测试样',
    prop: 'test',
    width: '50'
  },
  {
    label: '拉力样',
    prop: 'test',
    width: '57'
  },
  {
    label: '船头样',
    prop: 'test',
    width: '57'
  }
])
const tableData = ref([
  {
    test: '123',
    test1: '123',
    test2: '123'
  }
])

const tableHeader2 = ref([
  {
    label: '型体',
    prop: 'test',
    width: '90rem'
  },
  {
    label: '工厂型体',
    prop: 'test',
    width: '66'
  },
  {
    type: 'select',
    label: '新旧型体',
    prop: 'test',
    width: '66'
  },
  {
    label: '颜色代码',
    prop: 'test',
    width: '66'
  },
  {
    label: '颜色',
    prop: 'test',
    width: '66'
  },
  {
    label: '合同号',
    prop: 'test',
    width: '66'
  },
  {
    label: '下单日期',
    prop: 'test',
    width: '66'
  },
  {
    label: '客人交期',
    prop: 'test',
    width: '66'
  },
  {
    label: '品牌',
    prop: 'test',
    width: '66'
  },
  {
    label: '季度',
    prop: 'test',
    width: '66'
  },
  {
    label: '客人货号',
    prop: 'test',
    width: '66'
  },
  {
    label: '冲刀',
    prop: 'test',
    width: '66'
  },
  {
    label: '底模',
    prop: 'test',
    width: '66'
  },
  {
    label: '楦头',
    prop: 'test',
    width: '66'
  },
  {
    label: '大底厂商',
    prop: 'test',
    width: '66'
  },
  {
    label: '订单数',
    prop: 'test',
    width: '66'
  },
  {
    label: '预补数',
    prop: 'test',
    width: '66'
  },
  {
    label: '基本码',
    prop: 'test',
    width: '66'
  },
  {
    label: '中间码',
    prop: 'test',
    width: '66'
  },
  {
    label: '检核状态',
    prop: 'test',
    width: '66'
  },
  {
    label: '生成状态',
    prop: 'test',
    width: '66'
  }
])
const tableData2 = ref([
  {
    test: '123123'
  },
  {
    test: '123123'
  },
  {
    test: '123123'
  },
  {
    test: '123123'
  },
  {
    test: '123123'
  }
])

const tableHeader3 = ref([
  {
    label: '号码',
    prop: 'test',
    width: '50'
  },
  {
    label: '订单数',
    prop: 'test',
    width: '57'
  },
  {
    label: '预补数',
    prop: 'test',
    width: '57'
  }
])
const tableData3 = ref([
  {
    test: '132'
  },
  {
    test: '132'
  },
  {
    test: '132'
  },
  {
    test: '132'
  }
])

const value = ref(0)
const value2 = ref('')
const options = [
  {
    value: 0,
    label: 'PO号码明细'
  },
  {
    value: 1,
    label: '指令用量明细'
  },
  {
    value: 2,
    label: '配色注意事项'
  },
  {
    value: 3,
    label: '型体配楦明细'
  },
  {
    value: 4,
    label: '配色BOM明细'
  },
  {
    value: 5,
    label: '各节点明细'
  }
]
const options2 = [
  {
    value: 'Option1',
    label: 'Option1'
  }
]
const tableHeader4 = ref([
  {
    label: '配码',
    prop: 'test',
    width: '37'
  },
  {
    label: 'PO',
    prop: 'test',
    width: '37'
  },
  {
    label: '装箱方式',
    prop: 'test',
    width: '69'
  },
  {
    label: '数量',
    prop: 'test',
    width: '37'
  },
  {
    label: '27.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '28#',
    prop: 'test',
    width: '37'
  },
  {
    label: '28.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '29#',
    prop: 'test',
    width: '37'
  },
  {
    label: '29.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '30#',
    prop: 'test',
    width: '37'
  },
  {
    label: '30.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '31#',
    prop: 'test',
    width: '37'
  },
  {
    label: '31.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '32#',
    prop: 'test',
    width: '37'
  },
  {
    label: '32.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '33#',
    prop: 'test',
    width: '37'
  },
  {
    label: '33.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '34#',
    prop: 'test',
    width: '37'
  },
  {
    label: '34.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '35#',
    prop: 'test',
    width: '37'
  },
  {
    label: '35.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '36#',
    prop: 'test',
    width: '37'
  },
  {
    label: '36.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '37#',
    prop: 'test',
    width: '37'
  },
  {
    label: '37.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '38#',
    prop: 'test',
    width: '37'
  },
  {
    label: '38.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '39#',
    prop: 'test',
    width: '37'
  },
  {
    label: '39.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '40#',
    prop: 'test',
    width: '37'
  },
  {
    label: '40.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '41#',
    prop: 'test',
    width: '37'
  },
  {
    label: '41.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '42#',
    prop: 'test',
    width: '37'
  },
  {
    label: '42.5#',
    prop: 'test',
    width: '37'
  },
  {
    label: '43#',
    prop: 'test',
    width: '37'
  }
])
const tableData4 = ref([
  {
    test: '123'
  }
])

const tableHeader5 = ref([
  {
    label: '序号',
    prop: 'test'
  },
  {
    label: '部位',
    prop: 'test'
  },
  {
    label: '物料编号',
    prop: 'test'
  },
  {
    label: '段',
    prop: 'test'
  },
  {
    label: '分类',
    prop: 'test'
  },
  {
    label: '分类名称',
    prop: 'test'
  },
  {
    label: '材料颜色',
    prop: 'test'
  },
  {
    label: '材料名称',
    prop: 'test'
  },
  {
    label: '规格',
    prop: 'test'
  },
  {
    label: '单位',
    prop: 'test'
  },
  {
    label: '尺码启',
    prop: 'test'
  },
  {
    label: '尺码止',
    prop: 'test'
  },
  {
    label: '单耗',
    prop: 'test'
  },
  {
    label: '用量',
    prop: 'test'
  },
  {
    label: '预加量',
    prop: 'test'
  },
  {
    label: '比例%',
    prop: 'test'
  },
  {
    label: '备注',
    prop: 'test'
  }
])
const tableData5 = ref([])

const tableHeader6 = ref([
  {
    label: '序号',
    prop: 'test'
  },
  {
    label: '事项名称',
    prop: 'test'
  },
  {
    label: '生产注意事项',
    prop: 'test'
  }
])
const tableData6 = ref([])

const tableHeader7 = ref([
  {
    label: '鞋码',
    prop: 'test'
  },
  {
    label: '冲刀',
    prop: 'test'
  },
  {
    label: '楦头',
    prop: 'test'
  },
  {
    label: '大底',
    prop: 'test'
  },
  {
    label: '中底',
    prop: 'test'
  },
  {
    label: '鞋垫/脚床',
    prop: 'test'
  }
])
const tableData7 = ref([])

const tableHeader8 = ref([
  {
    label: '序号',
    prop: 'test'
  },
  {
    label: '部位',
    prop: 'test'
  },
  {
    label: '分段',
    prop: 'test'
  },
  {
    label: '片数',
    prop: 'test'
  },
  {
    label: '分类名称',
    prop: 'test'
  },
  {
    label: '物料编码',
    prop: 'test'
  },
  {
    label: '材料颜色',
    prop: 'test'
  },
  {
    label: '材料名称',
    prop: 'test'
  },
  {
    label: '规格',
    prop: 'test'
  },
  {
    label: '单位',
    prop: 'test'
  },
  {
    label: '尺码启',
    prop: 'test'
  },
  {
    label: '尺码止',
    prop: 'test'
  },
  {
    label: '用量',
    prop: 'test'
  },
  {
    type: 'select',
    label: '计算方式',
    prop: 'test'
  },
  {
    type: 'select',
    label: '领用部门',
    prop: 'test'
  },
  {
    type: 'checkbox',
    label: '捡料',
    prop: 'test'
  },
  {
    type: 'select',
    label: '主辅料',
    prop: 'test'
  },
  {
    label: '备注',
    prop: 'test'
  }
])
const tableData8 = ref([
  {
    test: '1223'
  }
])

const tableHeader9 = ref([
  {
    label: '号码',
    prop: 'test'
  },
  {
    label: '订单数',
    prop: 'test'
  },
  {
    label: '预补数',
    prop: 'test'
  }
])
const tableData9 = ref([])
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: end;
  margin: 10px 20px 0px;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}
</style>
